@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

:root {
  --background: #ffffff;
  --foreground: #000000;
  --font-tasa: ${tasaExplorer.variable};
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-dm-mono: ${dmMono.variable};
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000;
    --foreground: #ededed;
  }
}

:root {
  --background: #ededed;
  --foreground: #262626;
  /* Override fumadocs spacing variables */
  --fd-banner-height: 0px !important;
  --fd-nav-height: 0px !important;
  --fd-tocnav-height: 0px !important;

  /* Font variables */
  --font-gt-walsheim: 'GT Walsheim Trial';
  /* DM Mono is defined via next/font as --font-dm-mono */
  --card: 0 0% 100%;
  --card-foreground: 224 71.4% 4.1%;
  --popover: 0 0% 100%;
  --popover-foreground: 224 71.4% 4.1%;
  --primary: 220.9 39.3% 11%;
  --primary-foreground: 210 20% 98%;
  --secondary: 220 14.3% 95.9%;
  --secondary-foreground: 220.9 39.3% 11%;
  --muted: 220 14.3% 95.9%;
  --muted-foreground: 220 8.9% 46.1%;
  --accent: 220 14.3% 95.9%;
  --accent-foreground: 220.9 39.3% 11%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 20% 98%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 224 71.4% 4.1%;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --radius: 0.5rem;
}

.dark {
  --background: #000;
  --foreground: #ededed;
  --card: 224 71.4% 4.1%;
  --card-foreground: 210 20% 98%;
  --popover: 224 71.4% 4.1%;
  --popover-foreground: 210 20% 98%;
  --primary: 210 20% 98%;
  --primary-foreground: 220.9 39.3% 11%;
  --secondary: 215 27.9% 16.9%;
  --secondary-foreground: 210 20% 98%;
  --muted: 215 27.9% 16.9%;
  --muted-foreground: 217.9 10.6% 64.9%;
  --accent: 215 27.9% 16.9%;
  --accent-foreground: 210 20% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 20% 98%;
  --border: 215 27.9% 16.9%;
  --input: 215 27.9% 16.9%;
  --ring: 216 12.2% 83.9%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

/* Override any additional fumadocs spacing */
:root {
  --fd-layout-spacing: 0px !important;
}

/* Ensure docs components don't add extra spacing */
.fumadocs-nav,
.fumadocs-content,
.fumadocs-prose {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.prose > h1 {
  font-family: var(--font-dm-sans);
  font-weight: 800;
  font-size: 2.5rem;
}

.dark .sandbox-wrapper iframe {
  border-color: theme('colors.gray.800');
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  line-height: normal;
}

.font-tasa {
  font-family: var(--font-tasa);
}

.fade-sides {
  mask-mode: alpha;
  mask-image: linear-gradient(to right, transparent 0%, white 10%, white 90%, transparent 100%);
}

.fade-top {
  mask-mode: alpha;
  mask-image: linear-gradient(to bottom, transparent 15%, white 20%);
}

.fade-bottom {
  mask-mode: alpha;
  mask-image: linear-gradient(to bottom, white 80%, transparent 100%);
}

.fade-right {
  mask-mode: alpha;
  mask-image: linear-gradient(to right, white 70%, transparent 100%);
}

.fade-bottom-large {
  mask-mode: alpha;
  mask-image: linear-gradient(to bottom, white 50%, transparent);
}

.bento1-stroke {
  background-image: radial-gradient(ellipse farthest-side at left top, #628cff4f 74%, transparent 100%);
}

.bento2-stroke {
  background-image: radial-gradient(ellipse farthest-side at left top, #ffb0624f 74%, transparent 100%);
}

.bento3-stroke {
  background-image: radial-gradient(ellipse farthest-side at left top, #8db6f46f 74%, transparent 100%);
}

.bento4-stroke {
  background-image: radial-gradient(ellipse farthest-side at left top, #62ffb04f 74%, transparent 100%);
}

.bento5-stroke {
  background-image: radial-gradient(ellipse farthest-side at left top, #8db6f46f 74%, transparent 100%);
}

.col-border {
  border-right: 1px solid transparent;
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 83%, transparent);
  border-image-slice: 1;
}

.col-border:last-child {
  border-right: 0px solid transparent;
}

.scrollbar-hide::-webkit-scrollbar,
pre::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.custom-scroll::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

pre {
  font-size: 13px;
}

pre > code {
  font-family: var(--font-dm-mono) !important;
  font-weight: 400;
}

.tile-bg {
  background-image: url(../public/images/landing/tile.png);
  background-repeat: repeat;
  background-size: 23px auto;
}

.gradient-text-white {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, #fff 50.1%, rgba(255, 255, 255, 0.7) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.motia-cloud-shadow {
  box-shadow:
    0px -345px 97px 0px rgba(0, 0, 0, 0.01),
    0px -221px 88px 0px rgba(0, 0, 0, 0.12),
    0px -124px 75px 0px rgba(0, 0, 0, 0.39),
    0px -55px 55px 0px rgba(0, 0, 0, 0.66),
    0px -14px 30px 0px rgba(0, 0, 0, 0.76);
  @media screen and (max-width: 768px) {
    box-shadow:
      0px -124px 75px 0px rgba(0, 0, 0, 0.25),
      0px -55px 55px 0px rgba(0, 0, 0, 0.33),
      0px -14px 30px 0px rgba(0, 0, 0, 0.45);
  }
}
